<template>
  <div class="about-container">
    <h1 class="about-title">桜倉製薬株式会社について</h1>

    <section class="image-section">
      <div v-if="!isMobile" class="image-overlay">
        <h2 class="image-text" v-html="aboutData.title"></h2>
      </div>
      <img 
        :src="aboutData.thumbnail" 
        alt="Corporate Image"
        class="background-image"
      />
    </section>

    <div v-if="isMobile" class="mobile-heading">
      <h2 v-html="aboutData.title"></h2>
    </div>

    <div class="about-content" v-html="aboutData.content.replace(/&lt;br&gt;/g, '<br>')"></div>
    
  </div>
</template>


<script>
import { getAboutData } from '@/api'  // Use named import instead of default import

export default {
  name: 'AboutPage',
  data() {
    return {
      isMobile: false,
      aboutData: {
        title: "",
        thumbnail: "",
        subtitle: "",
        content: ""  // Changed from array to string
      }
    }
  },
  async mounted() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
    try {
    const data = await getAboutData();
    this.aboutData = {
      ...data.rows[0],
      content: data.rows[0].content.replace(/&lt;br&gt;/g, '<br>')
    };
  } catch (error) {
    console.error('Error fetching about data:', error);
  }
  },
  beforeUnmount() {  // 修改这里
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.isMobile = window.innerWidth <= 768;
    }
  }
}
</script>


<style scoped>
.about-container {
  padding: 1px 0%;
}

.about-title {
  text-align: center;
  font-size: 36px;
  margin: 40px 0;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  color: #666;
}

.image-section {
  position: relative;
  width: 100%;
  height: 40vh;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.image-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: black;
  z-index: 2;
}

.image-text {
  font-family: HiraMinPro-W3-83pv-RKSJ-H, 'Hiragino Mincho Pro', serif;
  font-size: 36px;
  letter-spacing: 0.12em;
  line-height: 1.4;
  margin: 0;
  text-align: center;
}

/* 移动端：替代 overlay，使用下方文字 */
.mobile-heading {
  padding: 24px 20px 0;
  text-align: center;
}
.mobile-heading h2 {
  font-family: HiraMinPro-W3-83pv-RKSJ-H, 'Hiragino Mincho Pro', serif;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #222;
  margin: 0;
}

/* 正文部分 */
.about-content {
  background: linear-gradient(to bottom, #FFF5E1, #FDE7F3);
  padding: 7% 20px;
  text-align: center;
}

.about-content p {
  color: #666;
  font-family: KozGoPr6N-Regular-83pv-RKSJ-H, 'Kozuka Gothic Pr6N';
  margin-bottom: 1.5em;
  line-height: 1.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .about-container {
    background: linear-gradient(to bottom, #FFF5E1, #FDE7F3);
  }

  .about-content {
  background: none;
  text-align: left;
}

.about-content p {
  font-family: KozGoPr6N-Regular-83pv-RKSJ-H, 'Kozuka Gothic Pr6N';
  margin-bottom: 1em;
}

  .image-section {
    height: 60vh;
  }

  .image-overlay {
    display: none;
  }

  .image-text {
    font-size: 1.2rem;
  }

}

@media (max-width: 768px) {
  .about-title {
    display: none; /* 隐藏标题 */
  }
  
  .image-section {
    height: 50vh; /* 调整图片区域高度 */
    margin-top: 0; /* 移除顶部间距 */
  }
}
</style>
